<template>
	<view class="order-page">
		<!-- 步骤导航 -->
		<view class="top-nav">
			<view class="cart-icon">
				<!-- <image src="/static/carousel04.png" mode="aspectFill"></image> -->
				<!-- <text class="iconfont icon-gouwuche icon-gouwucheColor"></text>
				<text>付款</text> -->
			</view>
			<view class="step-bar">
				<view class="step-item">1. 查看购物车</view>
				<view class="step-item active">2. 填写订单</view>
				<view class="step-item">3. 付款，完成购买</view>
			</view>
		</view>

		<!-- 收货地址 -->
		<view class="address-section">
			<view class="address-view">
				<view class="section-title">收货地址</view>
				<text class="new-address-btn" @click="addNewAddress">+ 新增地址</text>
			</view>
			<view class="address-item">
				<label class="address-radio">
					<view class="address-infoLeft" v-if="addressList && addressList.name">
						<text class="address-address" :title="addressList.area[0].text
						+addressList.area[1].text
						+addressList.area[2].text
						+addressList.address
						+'（'+addressList.name+'收'+addressList.mobile+'）'">

							{{addressList.area[0].text}}{{addressList.area[1].text}}{{addressList.area[2].text}}
							{{addressList.address}}
							（{{addressList.name}}收{{addressList.mobile}}）
						</text>
						<uni-icons type="compose" size="18" color="#999" @click="modifyAddress"></uni-icons>
					</view>
					<text v-else class="noInfo" @click="addNewAddress">请新增地址</text>
					<view v-if="addressArr.length>0" class="addressSwitch" @click="addressSwitchclick">切换地址</view>
					<!-- <text class="new-address-btn" @click="addressSwitchclick">切换地址</text> -->
				</label>
			</view>
		</view>

		<!-- 订单信息表格（使用 uni-table） -->
		<view class="order-info-section">
			<view class="section-title">订单信息</view>
			<uni-table border stripe>
				<uni-tr>
					<uni-th width="260" align="center">商品</uni-th>
					<uni-th width="160" align="center">产品型号</uni-th>
					<uni-th width="160" align="center">单价</uni-th>
					<uni-th width="160" align="center">数量</uni-th>
					<uni-th width="100" align="center">小计</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in orderList.cartList" :key="index">
					<uni-td>
						<view class="information">
							<view class="td-img">
								<image :src="item.param.image" mode="aspectFill"></image>
							</view>
							<view class="introduce">
								<view class="introduce-name">{{item.goods_title}}</view>
								<view class="introduce-model">{{item.param.specs}}</view>
							</view>
						</view>
					</uni-td>
					<uni-td align="center">{{item.param.model}}</uni-td>
					<uni-td>
						<view class="item-price">¥{{ (item.param.price-0).toFixed(2) }}</view>
					</uni-td>
					<uni-td align="center">{{ item.param.number }}</uni-td>
					<uni-td>
						<view class="item-subtotal">¥{{ (item.param.price * item.param.number).toFixed(2) }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 发票信息 -->

		<view class="invoice-container">
			<!-- 发票类型选择 -->
			<view class="section-title">发票信息</view>
			<!-- 新增发票信息按钮 -->
			<text class="add-btn" @click="editInfo(0)">+ 新增发票信息</text>
			<view class="invoice-type">
				<radio-group @change="handleTypeChange">
					<label class="radio-label">
						<radio color="#E91F1B" value="no" :checked="invoiceType === 'no'" />不开发票
					</label>
					<label class="radio-label">
						<radio color="#E91F1B" value="ordinary" :checked="invoiceType === 'ordinary'" />增值税普通发票
					</label>
					<label class="radio-label">
						<radio color="#E91F1B" value="special" :checked="invoiceType === 'special'" />增值税专用发票
					</label>
				</radio-group>
			</view>

			<!-- 发票内容展示，根据类型切换 -->
			<view class="invoice-info" v-if="invoiceType === 'ordinary' || invoiceType === 'special'">
				<!-- 个人发票 -->
				<view class="info-item" v-if="invoiceType === 'ordinary'">
					<view :class="['info-item-li',invoiceIndex===index?'info-itemSelected':'']"
						v-for="(item,index) in invoiceData" :key="index" @click="invoiceSelected(index)">
						<!-- <view class="info-item-li"> -->
						<text class="title">个人发票</text>
						<!-- <text class="content">{{item.title}}</text> -->
						<text class="content" :title="item.title">{{item.title}}</text>
						<view class="btu-style">
							<!-- <text class="edit-btn" @click="editInfo(2,item)">修改</text> -->
							<button type="primary" class="search" @click="editInfo(2,item)" title="修改">修改</button>
							<!-- <text class="default-btn" @click="setDefault">默认</text> -->
						</view>
					</view>
				</view>

				<!-- 单位发票 -->
				<view class="info-item" v-else>
					<view :class="['info-item-li',itemSelectedIndex===index?'info-itemSelected':'']"
						v-for="(item,index) in UnitInvoice" :key="index" @click="itemSelected(index)">
						<text class="title" :title="item.title">{{item.title}}</text>
						<text class="content" :title="item.number">税号：{{item.number}}</text>
						<!-- <text class="btu-style" @click="switchInvoice">切换发票</text> -->
						<view class="btu-style">
							<!-- <text class="edit-btn" @click="editInfo(1,item)">修改</text> -->
							<button type="primary" class="search" @click="editInfo(1,item)" title="修改">修改</button>
							<!-- <text class="default-btn" @click="setDefault">默认</text> -->
						</view>
					</view>
				</view>
			</view>

			<!-- 电子发票邮箱 -->
			<view class="email-section" v-if="invoiceType === 'ordinary' || invoiceType === 'special'">
				<view class="section-title">电子发票寄送邮箱</view>
				<input class="email-input" @input="validateEmail(email)" type="email" v-model="email"
					placeholder="请输入邮箱" />
				<text class="email_text" v-show="!isemail">请输入正确邮箱</text>
			</view>
		</view>


		<!-- 订单备注与提交 -->
		<view class="bottom-section">
			<view class="remark">
				<text class="section-title">订单备注：</text>
				<textarea class="textarea" placeholder="请输入内容（0-500字）" v-model="orderRemark" maxlength="500"></textarea>
			</view>
			<view class="price-info">
				<view class="total-price" v-if="orderList.totalPrice<200">商品邮费：¥12</view>
				<view class="total-price">原价：¥{{orderList.totalPrice}}</view>
				<view class="total-price">总价：¥<text
						class="total-priceTxst">{{ orderList.totalPrice<200?(orderList.totalPrice-0+12).toFixed(2):(orderList.totalPrice-0).toFixed(2) }}</text>
				</view>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>

		<!-- 新增修改地址弹窗 -->
		<modifyAddress :addressData="addressData" @addressUpdated="sureressModal" ref="addressModal"></modifyAddress>
		<!-- 修改和新增发票弹窗 -->
		<modifyInvoice ref="addInvoice" @address-updated="addressInvoice"></modifyInvoice>
		<view class="address-icon">
			<uni-popup ref="addressDialog" type="dialog">
				<uni-icons type="closeempty" size="20" class="modal-icon" @click="cancel"></uni-icons>
				<view class="address-container">
					<!-- 切换收货地址标题 -->
					<view class="address-title">切换收货地址</view>
					<!-- 收货地址列表 -->
					<view class="address-list">
						<view class="address-item-li" v-for="(item, index) in addressArr" :key="index"
							:class="{ 'default-address': index === addressIndex }" @click="addressClick(index,item)">
							<view class="address-info">
								<view class="address-info-item">
									<text class="address-label">收件人姓名：</text>
									<text class="address-value">{{item.name}}</text>
									<view v-if="item.is_default" class="default-tag">默认</view>
								</view>
								<view class="info-item">
									<text class="address-label">收件人电话：</text>
									<text class="address-value">{{item.mobile}}</text>
								</view>
								<view class="address-info-item">
									<text class="address-label">收件人地址：</text>
									<text class="address-value">
										{{item.area[0].text}}
										{{item.area[1].text}}
										{{item.area[2].text}}
										{{item.address}}
									</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 操作按钮 -->
					<view class="button-group">
						<button class="confirm-btn" type="primary" @click="confirm">确认</button>
						<button class="cancel-btn" type="default" @click="cancel">取消</button>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	// 引入云对象
	const addressManager = uniCloud.importObject('addressManager', {
		customUI: true
	}) // 去除云函数加载中
	const order = uniCloud.importObject('order')
	const global = uniCloud.importObject('global')
	import {
		getUserinfo
	} from '../../utils/common.js';
	import {
		cartBatchDelete
	} from '../../utils/http_data.js';
	export default {
		name: "fillOrder",
		data() {
			return {
				invoiceCloud: null, // 连接发票云对象
				currentStep: 1, // 当前步骤，填写订单为步骤1
				uid: '', // 用户id
				addressList: {
					uid: '',
					name: '', // 收件人
					mobile: '', // 手机号
					classes: '', // 回显地址
					area: [], // 后台完整地址
					address: '', // 详细地址
					is_default: true // 是否默认
				},
				// 地址信息
				addressData: {}, // 地址数据传递
				orderList: [], // 地址传递过来的数据
				addressArr: [], // 收货地址数据
				addressIndex: 0, // 选择切换的地址
				addressObj: null, // 选中的地址

				// 发票信息
				invoiceType: 'no', // 初始选择增值税普通发票，值可根据需求调整
				email: '', // 邮箱
				itemSelectedIndex: -1, // 单位选中的发票索引
				invoiceIndex: -1, // 个人选中的发票索引
				invoiceData: [], // 个人发票数据
				UnitInvoice: [], // 单位发票数据

				orderRemark: '', // 订单备注
				totalPrice: 0, // 订单总价
				isemail: true, // 验证邮箱是否正确
			};
		},
		props: {
			// cartList: {
			// 	type: Array, // 数字类型
			// 	required: false, // 必填项
			// 	default: null // 默认值
			// },
		},
		mounted() {
			this.orderList = uni.getStorageSync('transmit')

			console.log('用户信息：：', uni.getStorageSync('login-userinfo'))
			this.uid = uni.getStorageSync('login-userinfo')._id
			this.invoiceCloud = uniCloud.importObject('invoice');
			// this.orderList = JSON.parse(JSON.stringify(this.cartList));
			console.log('this.orderList::', this.orderList)
			// 获取全部地址
			this.getAllress()
			// 获取全部发票信息
			this.getInvoiceList();
		},
		methods: {
			// 获取地址
			async getAllress(val) {
				const uid = uni.getStorageSync('login-userinfo')._id
				console.log('获取用户地址：', uid)
				try {
					const res = await addressManager.getAll({
						page: 1, // 第1页
						size: 50, // 每页50条
						uid: uid
					})
					console.log('获取地址', res.list)
					const allAddresses = res.list;
					this.addressArr = allAddresses;
					if (this.addressObj && this.addressObj._id) {
						const index = this.addressArr.findIndex(item => item._id === this.addressObj._id);
						this.addressIndex = index;
					}
					if (!val) {
						// 获取所有默认地址（通常应该只有一个）
						const defaultAddresses = allAddresses.filter((item, index) => {
							if (item.is_default === true) {
								this.addressIndex = index;
								return item;
							}
						});
						// 取第一个作为默认地址
						this.addressList = defaultAddresses.length > 0 ? defaultAddresses[0] : allAddresses[0];
					}

				} catch (e) {
					console.error('获取地址失败', e.message)
				}
			},
			// 点击切换地址
			addressClick(index, item) {
				this.addressIndex = index;
				this.addressObj = item;
				console.log('选中的地址：', this.addressObj)

			},
			// 确认按钮点击事件处理函数
			confirm() {
				console.log('确认按钮被点击');
				this.addressList = {
					...this.addressList,
					...this.addressObj
				}
				console.log('选中的地址：', this.addressList);
				this.$refs.addressDialog.close();
			},
			// 取消按钮点击事件处理函数
			cancel() {
				console.log('取消按钮被点击');
				this.$refs.addressDialog.close()
			},
			// 返回地址信息
			sureressModal(val) {
				console.log(val)
				if (this.addressArr.length < 1) {
					this.getAllress()
				}
				if (!val.isAdd) {
					this.addressList = val;
				}
				console.log(val.area[0].text)
			},
			// 切换地址
			addressSwitchclick() {
				// 获取全部地址
				this.getAllress(1)
				this.$refs.addressDialog.open()
			},
			// 修改地址
			modifyAddress() {
				this.addressData = this.addressList
				console.log('this.addressData::修改：', this.addressData)
				this.$refs.addressModal.openModal(this.addressData)
			},
			// 新增收货地址
			addNewAddress() {
				this.addressData = {
					uid: this.uid,
					name: '', // 收件人
					mobile: '', // 手机号
					classes: '', // 回显地址
					area: [], // 后台完整地址
					address: '', // 详细地址
					is_default: false // 是否默认地址
				}
				console.log('this.addressData::新增：', this.addressData)
				this.$refs.addressModal.openModal(this.addressData)
			},


			// 获取发票信息
			async getInvoiceList() {
				console.log('获取发票时：uid', this.uid)
				try {
					const res = await this.invoiceCloud.getList({
						page: 1,
						size: 50,
						// type: 1 // 可选，筛选类型 1:公司 2:个人
					}, this.uid)
					if (res.success) {
						const invoiceList = res.data.list
						this.UnitInvoice = invoiceList.filter(item => item.type === 1); // 单位发票数据
						this.invoiceData = invoiceList.filter(item => item.type === 2); // 个人发票数据
						console.log('单位：', this.UnitInvoice)
						console.log('个人：', this.invoiceData)
						this.invoiceData.filter((item, index) => { // 个人
							if (item.is_default === true) {
								this.invoiceIndex = index;
								return item;
							}
						});
						this.UnitInvoice.filter((item, index) => { // 单位
							if (item.is_default === true) {
								this.itemSelectedIndex = index;
								return item;
							}
						});
						// this.invoiceData = []; // 个人发票数据
						// this.UnitInvoice = []; // 单位发票数据
					}
				} catch (e) {
					uni.showToast({
						title: e.message || '获取列表失败',
						icon: 'none'
					})
				}
			},
			// 重新获取发票数据
			addressInvoice(val) {
				this.getInvoiceList()
			},
			// 选择发票类型
			handleTypeChange(e) {
				this.invoiceType = e.detail.value;
			},
			// 单位选中发票信息
			itemSelected(index) {
				this.itemSelectedIndex = index;
			},
			// 个人选中发票信息
			invoiceSelected(index) {
				this.invoiceIndex = index;
			},
			// 新增和修改发票 0、新增  1、单位修改   2、个人修改
			editInfo(val, item) {
				let obj = {}
				if (val === 0) {
					obj = {
						type: 1, // 类型（默认公司）
						title: '', // 发票抬头
						number: '', // 纳税人识别号
						address: '', // 注册地址
						tel: '', // 注册电话
						blank: '', // 开户银行
						blank_number: '', // 银行账户
					}
				} else if (val === 1) {
					obj = item
				} else if (val === 2) {
					obj = item
				}
				this.$refs.addInvoice.openModal(val, obj)
				// uni.showToast({
				// 	title: '进入修改逻辑',
				// 	icon: 'none'
				// });
			},


			// 提交订单
			submitOrder() {
				this.currentStep = 2;
				if (this.isemail && this.invoiceType != 'no' && this.email == "") {
					uni.showToast({
						title: '请填写邮箱地址',
						icon: 'none'
					})
					return;
				}
				if (!this.isemail && this.invoiceType != 'no') {
					uni.showToast({
						title: '请填写正确邮箱',
						icon: 'none'
					})
					return;
				}
				console.log('this.addressList地址信息:', this.addressList)
				if (!this.addressList || !this.addressList.name) {
					uni.showToast({
						title: '请填写地址信息',
						icon: 'none'
					})
					return;
				}

				// 发票 和 邮箱
				let fapiao = null;
				// let is_invoice = false;
				if (this.invoiceType === 'no') { // 不开发票
					fapiao = null;
					this.email = '';
					// is_invoice = false;
				} else if (this.invoiceType === 'ordinary') { // 个人发票

					fapiao = this.invoiceData[this.invoiceIndex];
					// is_invoice = false;
					console.log(fapiao)
					if (!fapiao) {
						uni.showToast({
							title: '请添加发票信息',
							icon: 'none'
						})
						return;
					}
					fapiao.type = '普通发票';
				} else if (this.invoiceType === 'special') { // 单位发票
					fapiao = this.UnitInvoice[this.itemSelectedIndex]
					// is_invoice = false;
					console.log(fapiao)
					if (!fapiao) {
						uni.showToast({
							title: '请添加发票信息',
							icon: 'none'
						})
						return;
					}
					fapiao.type = '专用发票'
				} else {
					// is_invoice = false;
					uni.showToast({
						title: '选择发票类别失败',
						icon: 'none'
					})
				}
				// 地址
				// this.addressList
				// 商品信息  不满200 加运费
				// this.orderList
				// let shippingCost = 12;
				let shippingCost = 0;
				if (this.orderList.totalPrice < 200) {
					this.totalPrice = (this.orderList.totalPrice - 0 + shippingCost).toFixed(2);
					console.log('添加邮费：', (this.orderList.totalPrice - 0 + shippingCost).toFixed(2));
				} else {
					this.totalPrice = (this.orderList.totalPrice - 0).toFixed(2)
					console.log('未添加邮费：', (this.orderList.totalPrice - 0).toFixed(2));
					shippingCost = 0;
				}

				// 订单备注
				// this.orderRemark
				console.log('地址：', this.addressList)
				console.log('发票类型：', this.invoiceType)
				console.log('发票内容：', fapiao)
				console.log('邮箱：', this.email)
				console.log('商品总价格：', this.totalPrice)
				console.log('邮费：', shippingCost)
				console.log('商品：', this.orderList)
				console.log('订单备注：', this.orderRemark)

				const extractIds = this.orderList.cartList.map(item => item._id);
				console.log('商品id：：', extractIds)


				const data = {
					userinfo: {
						_id: this.uid, // 用户id
						name: '', // 用户姓名
						avatar: '' // 用户头像
					},
					address: {
						...this.addressList
					}, // 地址
					invoice: {
						...fapiao,
						email: this.email
					}, // 发票
					// is_invoice: is_invoice, // 是否开票
					goods: this.orderList, // 商品信息
					number: this.orderList.number, // 商品总数量
					postage: shippingCost, // 邮费  shippingCost
					discount: 0, // 优惠金额  0
					pay_total_price: this.totalPrice, // 支付总金额
					total_price: this.orderList.totalPrice, // 商品原价总金额
					is_pay: 0, // 是否支付  0 未支付 1已支付
					order_no: '', //  订单号 云函数统一生成 global.getOrderNo
					status: [{ //   0:待支付，1：待发货，2:待收货，3：已完成，4：申请退款，5：已退款，6：已取消，7：已评价
						code: 0, // 0:未支付，1：已支付，2:已发货，3：已收货，4：申请退款，5：已退款，6：已取消，7：已评价
						text: '待支付',
						create_date: new Date().getTime()
					}],
					is_urge: 0, //0:未催，大于零代表收次数
					notes: this.orderRemark, // 商品备注
					status_code: 0, //订单当前状态 
					create_date: new Date().getTime(), //下单时间
				}


				global.getOrderNumber().then((order_no) => {
					console.log('hanshu:', order_no)
					data.order_no = order_no; //  订单号 云函数统一生成，global.getOrderNo

					order.createOrder(data).then(() => {
						console.log('新增成功:', data)
						let orderData = {
							order_no: data.order_no, // 订单编号
							is_pay: data.is_pay, // 是否支付
							pay_total_price: data.pay_total_price, // 支付总金额
							create_date: data.create_date, // 下单时间
						}
						cartBatchDelete(this.uid, extractIds).then((res) => {
							console.log('删除后，返回购物车数量：', res)

							// this.$emit('cartN', res.totalN) // 传递购物车数量
							// this.$emit('fillOrderN', this.currentStep) // 传递步骤
							// this.$emit('orderData', orderData) // 传递数据
							orderData.cartN = res.totalN;
							uni.setStorage({
								key: 'orderData',
								data: orderData,
								success: function() {
									uni.redirectTo({
										url: '/pages/shopping_payment/shopping_payment'
									});
								}
							});

						}).catch((err) => {
							console.log('删除后错误：', err)
						})

					}).catch((e) => {
						console.error('新增失败', e.message)
					})
				});
			},
			validateEmail(email) {
				console.log(email)
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				console.log(typeof email === 'string' && emailRegex.test(email))
				this.isemail = typeof email === 'string' && emailRegex.test(email);
			}
		}
	}
</script>

<style scoped>
	.order-page {
		max-width: 1600px;
		min-width: 1280px;
		min-height: 800px;
		margin: 20px auto;
		background-color: #fff;
		padding: 10px;
	}

	/* 步骤条样式 */

	.top-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.cart-icon {
		display: flex;
		align-items: center;
	}

	.cart-icon image {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.step-bar {
		display: flex;
	}

	.step-item {
		padding: 5px 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		margin-right: 10px;
	}

	.active {
		background-color: #f54242;
		color: #fff;
	}



	.information {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		padding: 8px 10px;
	}

	.information:last-child {
		border-bottom: 0 #EBEEF5 solid;
	}

	.introduce {
		width: 326px;
		text-align: left;
		margin-left: 30px;
	}

	.introduce-name {}

	.introduce-model {
		padding-top: 20px;
	}

	.td-img {
		width: 100px;
		height: 100px;
		margin: auto;
	}

	.td-img image {
		width: 100%;
		height: 100%;
	}



	.item-price,
	.item-subtotal {
		width: 80px;
		text-align: center;
		color: #e60012;
		margin: 0 auto;
	}


	/* 收货地址样式 */
	.address-section {
		margin-bottom: 15px;
	}

	.address-view {
		/* display: flex; */
		margin-bottom: 10px;
	}

	.section-title {
		display: inline-block;
		margin-bottom: 10px;
	}

	.address-item {
		border: 1px solid #eee;
		padding: 10px;
	}

	.address-radio {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		justify-content: space-between;
	}

	.addressSwitch {
		/* align-items: end; */
		font-size: 14px;
		color: #e60012;
		cursor: pointer;
	}

	.address-infoLeft {
		max-width: 1000px;
		margin-left: 5px;
	}

	.noInfo {
		font-size: 14px;
		color: #999;
		cursor: pointer;
	}

	.address-address {
		max-width: 900px;
		/* background-color: red; */
		margin-right: 10px;
		display: inline-block;


		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.new-address-btn {
		width: 80px;
		float: right;
		margin-top: 5px;
		font-size: 14px;
		color: #e60012;
		cursor: pointer;
		/* 展示小手 */

		/* padding: 0; */
		/* margin-right: 0; */
	}

	/* 订单信息表格样式 */
	.order-info-section {
		margin-bottom: 15px;
	}

	.uni-table {
		margin-top: 10px;
	}

	.item-img {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

	.item-name {
		font-size: 14px;
	}


	/* 发票信息开始 */

	.invoice-container {
		padding: 15px;
		background-color: #fff;
	}

	.invoice-type {
		margin-bottom: 15px;
	}

	.add-btn {
		float: right;
		color: #e60012;
		font-size: 14px;
		cursor: pointer;
		/* 展示小手 */
	}

	.radio-label {
		margin-right: 20px;
	}

	.invoice-type /deep/ .uni-radio-input {
		width: 18px;
		height: 18px;
	}

	.invoice-type /deep/ uni-radio:not([disabled]) .uni-radio-input:hover {
		border-color: #e60012 !important;
	}

	.invoice-info {
		margin-bottom: 15px;
		/* width: 330px; */
	}

	.info-item {
		/* padding: 10px; */
		border-radius: 5px;
		display: flex;
		flex-wrap: wrap;
	}

	.info-item-li {
		width: 330px;
		/* background-color: #f8f8f8; */
		margin: 10px;
		border: 1px solid #ccc;
		padding: 10px;
		cursor: pointer;
		/* 展示小手 */
	}

	.info-itemSelected {
		border: 1px dashed #dc3545;
		background-color: #f9f9f9;
	}

	.title {
		width: 300px;
		font-weight: bold;
		margin-bottom: 5px;
		display: block;
		word-wrap: break-word;
		word-break: break-all;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.content {
		width: 300px;
		margin: 10px 0;
		display: inline-block;
		word-wrap: break-word;
		word-break: break-all;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.btu-style,
	.switch-btn {
		display: inline-block;
		width: 78px;
		float: right;
		margin-top: 10px;
	}

	.search {
		width: 60px;
		height: 28px;
		background-color: #D9001B;
		border-radius: 6px;
		font-size: 14px;
		line-height: 28px;
	}

	.edit-btn,
	.default-btn {
		margin-right: 10px;
		font-size: 14px;
	}

	.email-section {
		margin-bottom: 15px;
	}

	.email-label {
		display: block;
		margin-bottom: 5px;
	}

	.email-input {
		width: 400px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.email_text {
		color: #D9001B;
	}


	/* 底部提交区域样式 */
	.bottom-section {
		padding: 10px;
		height: 350px;
	}

	.remark {
		margin-bottom: 10px;
	}

	.remark-label {
		display: block;
		margin-bottom: 5px;
	}

	.textarea {
		width: 800px;
		margin: 0 10px;
		border-radius: 4px;
		min-height: 60px;
		border: 1px solid #ccc;
		padding: 5px;
	}

	.price-info {
		/* display: flex; */
		/* justify-content: space-between; */
		margin-bottom: 10px;
	}

	.total-price {
		text-align: end;
		padding: 0 10px;
	}

	.total-priceTxst {
		color: #e60012;
	}

	.submit-btn {
		width: 80px;
		background-color: #e60012;
		color: #fff;
		font-size: 14px;
		margin: 0;
		padding: 0;
		float: right;
		margin-right: 10px;
	}


	/* 切换地址弹窗 */
	.address-container {
		width: 590px;
		/* padding: 10px 10px; */
		background-color: #FFF;
		border-radius: 10px;
		padding-bottom: 20px;
	}

	.address-title {
		width: 100%;
		height: 50px;
		line-height: 50px;
		padding: 0 10px;
		background-color: #F5F5F5;
		font-size: 14px;
		font-weight: 600;
		/* color: #333; */
		margin-bottom: 10px;
		box-sizing: border-box;
		border-radius: 10px 10px 0 0;
	}

	.address-list {
		min-height: 200px;
		overflow-y: auto;
		margin-bottom: 10px;
	}

	.address-item-li {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 500px;
		margin: 0 auto;
		margin-bottom: 20px;
		cursor: pointer;
	}

	.default-address {
		border-color: #f56c6c;
		background-color: #f9f9f9;
	}

	.address-info {
		display: flex;
		flex-direction: column;
	}

	.address-info-item {
		display: flex;
		align-items: center;
		/* margin-bottom: 5px; */
	}

	.address-label {
		width: 110px;
		color: #666;
	}

	.address-value {
		flex: 1;
		color: #333;
	}

	.default-tag {
		background-color: #f56c6c;
		color: white;
		padding: 2px 4px;
		border-radius: 5px;
		margin-left: 5px;
		font-size: 14px;
	}

	.button-group {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.confirm-btn {
		background-color: #e60012;
		color: white;
		width: 72px;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
		font-size: 14px;
	}

	.cancel-btn {
		background-color: #fff;
		color: #666;
		width: 72px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		margin-left: 150px;
	}

	.address-icon {
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
		cursor: pointer;
	}
</style>